<template>
    <div>
      <div style="margin: 10px 0">
        <el-carousel height="450px" :interval="10000">
          <el-carousel-item v-for="item in imgs" :key="item">
            <img :src="item" alt="" style="width: 100% ">
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- <el-row :gutter="20"  @click="Spcomment">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in imgs" :key="index">
            <img :src="item" style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
        </el-col>
      </el-row> -->


      <el-row :gutter="20"  @click="Spcomment">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in imgs" :key="index">
          <el-card shadow="hover" class="image-container">
            <img :src="item"  style="width: 200px; height: 200px; object-fit: cover; object-position: center;">
            <div style="padding: 14px;">
              <!-- <span>{{ item.title }}</span> -->
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- <div style="margin: 10px 0">
        <el-row :gutter="10">
          <el-col :span="6" v-for="item in files" :key="item.id" style="margin-bottom: 10px height=150px">
            <div style="border: 1px solid #ccc; padding-bottom: 10px">
              <div class="image-container ">
                <img :src="item.url" alt="" style="width: 100%;">
              </div>
              <div style="padding: 10px"><el-button type="primary">进入论坛</el-button></div>
            </div>
          </el-col>
        </el-row>
      </div> -->
    </div>
  </template>
  
  <script>
  import request from '@/utils/request';
  export default {
    name: "FrontHomeView",
    data() {
      return {
        imgs: [
            'https://cdn.pixabay.com/photo/2024/04/30/04/36/chess-8729265_640.png',
            'https://cdn.pixabay.com/photo/2019/05/04/23/13/beach-4179360_1280.jpg',
            'https://cdn.pixabay.com/photo/2021/01/01/06/47/watermelon-5877895_640.png'
        ],
        existimgs: [8],
        mycursor: 0,
        // images: [
        //   { src: 'https://cdn.pixabay.com/photo/2024/04/18/19/56/leaves-8704937_640.png', alt: 'Image 2', title: '粉色叶子' },
        //   { src: 'https://cdn.pixabay.com/photo/2023/11/20/13/21/shape-8401083_640.png', alt: 'Image 2', title: '纺织天空' },
        //   { src: 'https://cdn.pixabay.com/photo/2024/06/20/18/42/metaverse-8842766_640.jpg', alt: 'Image 2', title: 'VR' },
        //   { src: 'https://cdn.pixabay.com/photo/2024/06/18/18/24/ship-8838527_640.jpg', alt: 'Image 2', title: '遨游' },
        //   { src: 'https://cdn.pixabay.com/photo/2024/04/17/17/02/box-8702500_640.jpg', alt: 'Image 1', title: '箱子里的黑猫' },
        //   { src: 'https://cdn.pixabay.com/photo/2023/09/04/22/35/boy-8233868_640.png', alt: 'Image 2', title: '男子的狗' },
        //   { src: 'https://cdn.pixabay.com/photo/2022/04/13/16/46/girl-7130668_640.png', alt: 'Image 2', title: '窗外的星空' },
        //   { src: 'https://cdn.pixabay.com/photo/2024/06/12/11/11/sketch-8825072_1280.jpg', alt: 'Image 2', title: '下雨' },
        // ],
        files: []
      }
    },
    created() {
      this.load()
    },
    methods: {
        load() {
        request.get("/file/random", {
        }).then(res => {
          res.data.forEach(img => { this.imgs.push(img.url)});
        })
      },
    }
  }
  </script>
  
  <style>
  .image-container {
    width: 200px; /* 设定容器的宽度 */
    height: 200px; /* 设定容器的高度 */
    overflow: hidden; /* 隐藏溢出的内容 */
    position: relative; /* 相对定位，方便绝对定位子元素 */
    margin-top: 15px; /* 上方外边距 */
    margin-bottom: 15px; /* 下方外边距 */
  }
  
  .image-container img {
    width: 200px; /* 图片宽度设为100% */
    height: 200px; /* 图片高度设为100% */
    object-fit: cover; /* 保持长宽比，填充容器 */
    object-position: center; /* 图片从中心开始裁剪 */
  }
  el-card {
  margin-bottom: 20px; /* 为卡片添加一些底部间距 */
}

.el-card__body {
  padding: 0; /* 移除默认的内边距 */
}

.el-card__body img {
  width: 100%; /* 确保图片宽度为卡片宽度 */
  height: 100%; /* 确保图片高度为卡片高度 */
  object-fit: cover; /* 保持长宽比，填充容器 */
  object-position: center; /* 图片从中心开始裁剪 */
}
  </style>